<template>
    <div class="screen-block">
        <Title>{{ $t('screen.member') }}</Title>
        <div class="list1">
            <border-box10 v-for="item in option" :key="item">
                <div class="list-con">
                    <div class="title">{{ item.name }}</div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </border-box10>
        </div>
        <Title>{{ $t('screen.fuelPrice') }}</Title>
        <div class="list2">
            <border-box10 v-for="item in option2" :key="item">
                <div class="list-con">
                    <div class="title">{{ item.name }}</div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </border-box10>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { BorderBox10 } from '@kjgl77/datav-vue3';
    import useTimeExecutor from '@/hooks/useTimeExecutor';
    import Title from '../title.vue';
    import { queryMember, queryCurrentFuelPrice } from '../../service';

    const { t } = useI18n();
    const option = ref<any>([]);
    const option2 = ref([]);
    const fetchData = async () => {
        const data = await queryMember();
        const { result } = data as any;
        option.value = [
            {
                name: t('screen.member.totalMemberNum'),
                value: result.totalMemberNum,
            },
            {
                name: t('screen.member.totalMemberBalance'),
                value: result.totalMemberBalance,
            },
            {
                name: t('screen.member.teamMemberNum'),
                value: result.teamMemberNum,
            },
            {
                name: t('screen.member.teamMemberRecharge'),
                value: result.teamMemberRecharge,
            },
        ];
    };
    useTimeExecutor({
        second: 10,
        immediate: true,
        func: fetchData,
    });
    // fetchData();
    const fetchData2 = async () => {
        const data = await queryCurrentFuelPrice();
        const { result } = data as any;
        option2.value = result.map(
            (o: { fuelName: string; fuelPrice: number }) => {
                return {
                    name: o.fuelName,
                    value: o.fuelPrice,
                };
            }
        );
        if (option2.value.length > 3) {
            option2.value.length = 3;
        }
    };
    // fetchData2();
    useTimeExecutor({
        second: 10,
        immediate: true,
        func: fetchData2,
    });
</script>

<style lang="less" scoped>
    .screen-block {
        width: 100%;
        height: 100%;

        .list1 {
            display: grid;
            grid-gap: 10px;
            grid-template-rows: repeat(2, 50%);
            grid-template-columns: 45% 45%;
            width: 100%;
            height: 45%;
            margin-left: 20px;
            padding: 0;

            .list-con {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }

        .list2 {
            display: grid;
            grid-gap: 23px;
            grid-template-rows: repeat(1, 50%);
            grid-template-columns: 27% 27% 27%;
            width: 100%;
            height: 43%;
            margin-left: 20px;
            padding: 0 10px;

            .list-con {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }

        .title {
            font-size: 10px;
        }

        .value {
            color: #1cd1ff;
            font-weight: bold;
            font-size: 18px;
        }
    }
</style>
